<template>
  <view class="chart-box-one">
    <view class="time-change-box">
      <view class="tag-content">
        <uni-tag class="tag-box" v-for="item in rangeList" :key="item.value" :text="item.text" :type="item.type"
          @click="clickTagList(item.value)" />
      </view>
      <uni-datetime-picker v-if="tagType2" v-model="daterange" type="daterange" rangeSeparator="-"
        @change="timeChange($event, 2)" />
      <view v-else class="uni-input" @tap="rangeVisible2 = true">
        <view>{{monthRange2[0] || '开始日期'}}</view>
        <view class="icon">-</view>
        <view>{{monthRange2[1] || '结束日期'}}</view>
      </view>
      <img :src="switchScreenImg" @click="fullScreenFn()" style="width:20px;height:20px;margin: 6px 0 0 6px" />
      <w-picker :visible.sync="rangeVisible2" class="my-date-picker" mode="range" startYear="2017" endYear="2030"
        :value="rangeVal2" :current="true" @confirm="onConfirm($event)" @cancel="rangeVisible2 = false"
        ref="range"></w-picker>
    </view>
    <!-- 涨跌比 -->
    <view class="charts-box">
      <view v-show="chartDataUpAndDownNo" class="no-data-box">
        <img :src="noDataImg" />
        <view>暂无数据</view>
      </view>
      <echarts-uniapp v-show="!chartDataUpAndDownNo" canvasId="FGFGFS1" :pageProgress="pageProgress" :pageSize="8"
        :option="stackBarIndexOption"></echarts-uniapp>
    </view>
    <loading v-show="showLoading2"></loading>
  </view>
</template>
<script>
  import config from '@/config';
  import { getUpAndDownList } from '@/api/analysis.js';

  export default {
    computed: {
      noDataImg() {
        return config.baseImgUrl + '/no-data.png';
      },
      switchScreenImg() {
        return config.baseImgUrl + '/switch-screen.png';
      }
    },
    data() {
      return {
        tagType2: true,
        showLoading2: false,
        rangeVisible2: false,
        chartDataUpAndDownNo: false,
        daterange: [],
        monthRange2: [],
        raiseTimeType: 'DoD',
        stackBarIndexOption: {
          color: ['#FB6567', '#47D9B6'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '2%',
            top: '33%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: {
            max: 100,
            min: -100,
            type: 'value',
            name: '单位：万吨',
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -20]
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              show: true
            },
          },
          series: [],
          dataZoom: []
        },
        rangeList: [
          { value: 'DoD', text: '日环比', type: 'primary' },
          { value: 'MoM', text: '月环比', type: 'default' }
        ],
        pageProgress: 0
      }
    },
    onReady() {
      const now = new Date()
      const date = new Date(new Date() - 1000 * 60 * 60 * 24 * 7);
      const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
      this.rangeVal2 = [currentDate, currentDate]
      const endDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.daterange = [endDate, currentDate];
      this.getRiseAndFallData();
    },
    methods: {
      fullScreenFn() {
        this.$tab.switchTab('/pages/work/index');
      },
      clickTagList(type) {
        this.raiseTimeType = type
        if (type === 'MoM') {
          this.tagType2 = false;
        } else {
          this.tagType2 = true;
        }
        this.monthRange2 = []
        this.getRiseAndFallData();
        this.rangeList = this.handleRange(this.rangeList, type)
      },
      handleRange(list, type) {
        return list.map(item => {
          if (item.value === type) {
            item.type = 'primary';
          } else {
            item.type = 'default';
          }
          return item
        });
      },
      async getRiseAndFallData() {
        const data = {
          timeDimension: this.raiseTimeType,
        }
        if (this.tagType2) {
          if (this.daterange.length) {
            data['startTime'] = `${this.getFullDate(this.daterange[0])} 00:00:00`
            data['endTime'] = `${this.getFullDate(this.daterange[1])} 00:00:00`
          }
        } else {
          if (this.monthRange2.length) {
            data['startTime'] = `${this.monthRange2[0]}-01 00:00:00`
            data['endTime'] = `${this.monthRange2[1]}-01 00:00:00`
          }
        }
        this.showLoading2 = true
        const res = await getUpAndDownList(data);
        const result = res?.data?.raiseFallIndexList || []
        if (result.length > 0) {
          this.chartDataUpAndDownNo = false;
          const xAxisList = result.map(e => e.time) || []
          this.pageProgress = Number((100 / xAxisList.length).toFixed(2))
          this.stackBarIndexOption.legend.data = ['上涨', '下跌']
          this.stackBarIndexOption.xAxis.data = xAxisList
          this.stackBarIndexOption.series = [
            {
              name: '上涨',
              type: 'bar',
              stack: 'Total',
              data: result.map(e => +e.priceRaisePercentage.slice(0, -1))
            }, {
              name: '下跌',
              type: 'bar',
              stack: 'Total',
              data: result.map(e => -e.priceFallPercentage.slice(0, -1))
            }
          ]
          let start = 0;
          if (xAxisList.length > 8) {
            start = 100 - this.pageProgress * 7;
          }
          this.stackBarIndexOption.dataZoom = [{
            show: true,
            height: 0,
            bottom: 0,
            start: start,
            end: 100
          }]
        } else {
          this.chartDataUpAndDownNo = true;
        }
        this.showLoading2 = false
      },
      getFullDate(date) {
        const dateList = date.split('-')
        return `${dateList[0]}-${this.getFullString(dateList[1])}-${this.getFullString(dateList[2])}`
      },
      timeChange(timeRange) {
        this.daterange = timeRange
        this.getRiseAndFallData()
      },
      onConfirm(res) {
        const startMonth = `${res.obj.fyear}-${this.getFullString(res.obj.fmonth)}`
        const endMonth = `${res.obj.tyear}-${this.getFullString(res.obj.tmonth)}`
        this.monthRange2 = [startMonth, endMonth]
        this.getRiseAndFallData();
      },
      getFullString(value) {
        if (value.length === 1) {
          return `0${value}`
        }
        if (value.length === 2) {
          return value
        }
        return value
      },
    }
  }
</script>
<style lang="scss" scoped>
  .chart-box-one {
    position: relative;
    background: #fff;
    padding: 10px;
    margin: 10px;
    width: 96%;
    overflow: hidden;
    border-radius: 8px;

    .header-wrap {
      .title-wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        text.title {
          font-size: 15px;
          font-weight: 600;
        }

        text.filter {
          color: #409EFE;
        }
      }
    }

    .tag-content {
      margin-right: 10px;

      .tag-box+.tag-box {
        margin-left: 6px;
      }
    }


  }

  .time-pick {
    border: 1px solid #e5e5e5;
    padding: 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
  }

  .example-box {
    display: flex;
  }

  .charts-content {
    background: #fff;
  }

  .search-box {
    padding: 0 8px;
  }

  .time-change-box {
    width: 100%;
    padding: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E6E6E6;

    .til {
      width: 80rpx;
      float: left;
      margin-top: 9px;
      position: relative;
    }

    .uni-input {
      width: 400rpx;
      height: 32px;
      line-height: 1;
      font-size: 14px;
      border-radius: 5px;
      padding: 0px 11px 0 11px;
      word-spacing: 15px;
      line-height: 32px;
      border-radius: 5px;
      border: 1px solid #eee;
      display: flex;
      justify-content: space-around;
    }

    .range-date {
      width: 187px;
      height: 32px;
      display: inline-block;
      border: 1px solid #eee;
      float: left;
      margin-right: 6px;
    }

    button {
      position: absolute;
      right: 6px;
      top: -6px;
    }
  }

  .charts-box {
    width: 100%;
    height: 280px;
    text-align: center;

    .no-data-box {
      padding-top: 20px;
      text-align: center;

      >view {
        margin-top: 10px;
      }
    }

    image {
      height: 150px;
      width: 226px;
    }

    .chart-title:before {
      content: '';
      display: block;
      top: 1px;
      border-radius: 10px;
      background-color: #0ea8e4;
      width: 5px;
      height: 20px;
      position: absolute;
      top: 10px;
      left: -12px;
    }

    .chart-title {
      font-size: 20px;
      color: #1f2f3d;
      margin-left: 20px;
      line-height: 40px;
      font-weight: 700;
      white-space: nowrap;
      position: relative;
    }
  }
</style>
<style lang="scss">
  ::v-deep.chart-box-one .tag-box .uni-tag {
    padding: 6px 8px !important
  }
</style>